<template>
  <div class="school">
    <div class="logo centre">
      <div class>
        <router-link
          to="/"
          tag="img"
          src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
          alt
        ></router-link>
        <span>学校详情</span>
      </div>
    </div>

    <div class="schoolDeatil">
      <h3 class="centre h3Deatil">
<<<<<<< HEAD
        <router-link to="/" tag="span">首页</router-link>>学校详情
=======
        <router-link to="index" tag="span">首页</router-link>>
        <router-link to="/Personal" tag="span">个人中心</router-link>>学校详情
>>>>>>> 314b442cce11d658746227581b0160373004c345
      </h3>
      <div class="Deatil centre">
        <div class="schoolDeatil_left">
          <div class="top">
            <div class="top_left">
              <div class="schoolLogo">
                <img :src="schoolHeader.logoUrl" alt />
              </div>
              <div class="school_name">
                <h3>{{schoolHeader.schoolName}}</h3>
                <i>{{schoolHeader.keyOne +"/"}}{{schoolHeader.keyTwo+"/"}}双一流/{{schoolHeader.schoolPrivateName+"/"}}{{schoolHeader.schoolTypeName+"/"}}</i>
                <!-- <div class="contact">
                  <span>
                    官方网址 :
                    <i>www.hsdpash.com</i>
                  </span>
                  <span>
                    电话号码 :
                    <i>156666666</i>
                  </span>
                </div>-->
              </div>
            </div>
            <div class="top_right">
              <div class="follow" @click="goschoolPersonsl">
                <img v-if="guanzhushow==0" src="@/assets/img/follow.png" alt />
                <img v-if="guanzhushow==1" src="@/assets/img/love2.png" alt />
              </div>
              <div class="icon">
<<<<<<< HEAD
                <!-- <span>分享至:</span>
=======
                <span>分享至:</span>
>>>>>>> 314b442cce11d658746227581b0160373004c345
                <ul>
                  <li>
                    <i class="iconfont">&#xe90b;</i>
                  </li>
                  <li>
                    <i class="iconfont">&#xe60e;</i>
                  </li>
                  <li>
                    <i class="iconfont">&#xe63d;</i>
                  </li>
<<<<<<< HEAD
                </ul>-->
=======
                </ul>
>>>>>>> 314b442cce11d658746227581b0160373004c345
              </div>
            </div>
          </div>
          <div class="router">
            <ul>
              <router-link
                :to="{
                 name: '/SchoolDeati/School', 
                 params: { userId: this.schoolHeader.schoolId }}"
                tag="li"
              >学校概括</router-link>
              <router-link
                :to="{
              
               name:'/SchoolDeati/RecruitStudents',
                params: { userId: this.schoolHeader.schoolId }}
              "
                tag="li"
<<<<<<< HEAD
              >录取数据</router-link>
=======
              >招生数据</router-link>
>>>>>>> 314b442cce11d658746227581b0160373004c345
              <router-link
                :to="{
                 name:'/SchoolDeati/Information',
                params: { userId: this.schoolHeader.schoolId }
               }"
                tag="li"
<<<<<<< HEAD
              >招生计划</router-link>
              <!-- <router-link to="/SchoolDeati/Whereabouts" tag="li">毕业去向</router-link> -->
=======
              >录取数据</router-link>
              <router-link to="/SchoolDeati/Whereabouts" tag="li">毕业去向</router-link>
>>>>>>> 314b442cce11d658746227581b0160373004c345
            </ul>
          </div>
          <div class="bottom">
            <transition name="fade">
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
            </transition>
          </div>
        </div>
        <div class="schoolDeatil_right">
          <div class="General_rules">
            <h3>&nbsp;&nbsp;&nbsp;&nbsp;招生简章</h3>

            <div class="list">
              <ul
                style=" width:100%;height:100%;overflow-y:scroll;overflow-x:hidden;padding-right:50px;"
              >
<<<<<<< HEAD
                <li v-for="(list , index) in General" :key="index" @click="gogetstudent(list)">
                  <p>{{list.title}}</p>
=======
                <li v-for="(list , index) in General" :key="index">
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;{{list.title}}</p>
>>>>>>> 314b442cce11d658746227581b0160373004c345
                </li>

                <br />
                <br />
                <br />
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
<<<<<<< HEAD
=======
import { type } from "os";
>>>>>>> 314b442cce11d658746227581b0160373004c345
export default {
  name: "SchoolDeatil",
  data() {
    return {
      guanzhuSchoolbox: "",
      guanzhushow: 1,
      schoolHeader: "",
      schoolID: this.$route.params.userId
    };
  },
  methods: {
<<<<<<< HEAD
    gogetstudent(list) {
      // console.log(list.year)

      this.$router.push({
        path: "/GetStudent",
        query: { year: list.year, schoolID: this.schoolID }
      });
    },
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
    open3(s) {
      this.$message.error(s);
    },
    goschoolPersonsl() {
      this.guanzhushow = !this.guanzhushow;
      //关注前往个人关注中心。
      // console.log(this.schoolID)
      this.$ajax({
        method: "post",
        url: "/api/follow/saveFollow?type=0&id=" + this.schoolID,
        success: res => {
          if (res.data.code == 0) {
            // alert(res.data.data.data)
            this.$notify({
              title: "成功",
              message: res.data.data.data,
              type: "success"
            });
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    },
    getschoollist() {
      this.$ajax({
        method: "post",
        url: "/api/follow/listTest",
        data: {
          pageNow: 1,
          pageSize: 10
        },
        success: res => {
          if (res.data.code == 0) {
            this.guanzhuSchoolbox = res.data.data.list;
            for (var i = 0; i < this.guanzhuSchoolbox.length; i++) {
              if (this.schoolID == this.guanzhuSchoolbox[i].schoolId) {
                this.guanzhushow = 0;
              }
            }
          } else {
          }
        }
      });
    },
    getSchoolHeader() {
      this.$ajax({
        method: "GET",
        url: "/api/searchUniversity/getUniversity/" + this.schoolID,

        success: res => {
          if (res.data.code == 0) {
            this.schoolHeader = res.data.data;

            this.goschool(res.data.data.schoolId);
          }
        }
      });
    },
    goschool(ID) {
      this.$router.push({
        name: "/SchoolDeati/School",
        params: { userId: ID }
      });
    },
    getGeneral() {
      this.$ajax({
        method: "post",
        url:
          "/api/recruitPlan/recruitConstitutionList?schoolId=" + this.schoolID,
        success: res => {
          if (res.data.code == 0) {
            // alert(res.data.data.data)
            this.General = res.data.data;
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    }
  },
<<<<<<< HEAD
  watch: {
    $route(to, from) {
      this.$ajax({
        method: "post",
        url: "/api/follow/listTest",
        data: {
          pageNow: 1,
          pageSize: 10
        },
        success: res => {
          if (res.data.code == 0) {
            this.guanzhuSchoolbox = res.data.data.list;
            for (var i = 0; i < this.guanzhuSchoolbox.length; i++) {
              if (this.schoolID == this.guanzhuSchoolbox[i].schoolId) {
                this.guanzhushow = 0;
              }
            }
          } else {
          }
        }
      });
    }
  },
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
  beforeCreate() {
    this.$nextTick(() => {
      this.getSchoolHeader();
      this.getschoollist();
      this.getGeneral();
    });
  },
  created() {}
};
</script>
<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

//bounce(动画)
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.school {
  .logo {
    padding: 10px 0;
    img {
      width: 48px;
    }
    span {
      font-size: 22px;
      color: #5e5e5e;
      padding-left: 24px;
      position: relative;
      top: -18px;
    }
  }
  .schoolDeatil {
    background: #f6f6f6;
    width: 100%;
    .h3Deatil {
      color: #757575;
      padding-top: 26px;

      span {
        cursor: pointer;
      }
    }
    .Deatil {
      display: flex;
      justify-content: space-between;
      padding-top: 20px;
      .schoolDeatil_left {
        width: 918px;
        .top {
          height: 134px;
          width: 100% -66px;
          background: #ffffff;
          border-radius: 10px;
          margin-bottom: 16px;
          display: flex;
          justify-content: space-between;
          padding: 0 66px;
          padding-top: 46px;
          .top_left {
            display: flex;
            .schoolLogo {
              height: 100%;
              padding-right: 20px;
              img {
                width: 66px;
              }
            }
            .school_name {
              padding-top: 6px;
              h3 {
                font-size: 20px;
                color: #515151;
                padding-bottom: 12px;
              }
              i {
                color: #a3a3a3;
                font-size: 12px;
              }
              .contact {
                padding-top: 24px;
                color: #a3a3a3;
                font-size: 12px;
                span {
                  padding-right: 30px;
                }
              }
            }
          }
          .top_right {
            .follow {
              height: 80px;
              img {
                width: 36px;
                float: right;
              }
            }
            .icon {
              display: flex;
              span {
                color: #8b8b8b;
                font-size: 12px;
              }
              ul {
                display: flex;
                li {
                  width: 22px;
                  height: 22px;
                  position: relative;
                  border-radius: 50%;
                  background: #c8c8c8;
                  color: #f6f6f6;
                  text-align: center;
                  top: -6px;
                  margin-left: 8px;
                  i {
                    position: relative;
                    font-size: 10px;
                    text-align: center;
                    left: 1px;
                    top: 1px;
                  }
                }
              }
            }
          }
        }
        .router {
          margin-bottom: 16px;
          ul {
            width: 100% -136px;
            display: flex;
            justify-content: space-between;
            border-radius: 10px;
            padding: 0 68px;
            background: #ffffff;
            li {
              cursor: pointer;
              padding: 30px 0;
              color: #a6a6a6;
              font-size: 16px;
            }
          }

          .router-link-exact-active {
            color: #4b4b4b;
          }
        }
        .bottom {
          width: 100%;
        }
      }
      .schoolDeatil_right {
        width: 240px;
        .General_rules {
          padding: 0 10px;
          background: #ffffff;
          width: 240px;
          height: 340px;
          border-radius: 10px;
          h3 {
            color: #414141;
            display: block;
            padding-top: 34px;
            padding-bottom: 14px;
            font-size: 20px;
            border-bottom: 12px #f0f0f0 solid;
          }
          .list {
            height: 260px;
            overflow: hidden;

            ul {
              width: 100%;
              padding-bottom: 20px;
              li {
<<<<<<< HEAD
                cursor: pointer;
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
                padding: 20px 0;
                width: 100%;
                display: block;
                border-bottom: 8px #f0f0f0 solid;
                font-size: 12px;
                color: #2c2c2c;
<<<<<<< HEAD
                position: relative;
                p {
                  display: block;
=======
                p {
>>>>>>> 314b442cce11d658746227581b0160373004c345
                  width: 88%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
<<<<<<< HEAD
              li:hover > p {
                width: 88%;
                display: block;
                overflow: visible;
                line-height: 20px;
                white-space: normal;
                z-index: 10;
              }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
            }
          }
        }
        .major {
          margin-top: 34px;
          padding: 0 10px;
          background: #ffffff;
          width: 240px;
          height: 340px;
          border-radius: 10px;
          h3 {
            color: #414141;
            display: block;
            padding-top: 34px;
            padding-bottom: 14px;
            font-size: 20px;
            border-bottom: 12px #f0f0f0 solid;
          }
          .list {
            height: 260px;
            overflow: hidden;

            ul {
              width: 100%;
              padding-bottom: 20px;
              li {
                padding: 20px 0;
                width: 100%;
                display: block;
                border-bottom: 8px #f0f0f0 solid;
                font-size: 12px;
                color: #2c2c2c;
                p {
                  width: 88%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>